<template>
  <div class="app-container">
    <dl class="operatingrisk-list xh-card">
      <dt class="xh-card-dt">
        <span class="title">查看测算记录</span>
        <div></div>
      </dt>
      <dd>
        <el-table
          v-loading="loading"
          :cell-class-name="tableRowClassName"
          header-cell-class-name="createoper-step-table-header"
          border
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'time', order: 'descending'}"
        >
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="time" sortable label="测算时间">
            <template slot-scope="{ row }">{{ formattedDate(row.time,'YY年MM月DD日 HH:mm') }}</template>
          </el-table-column>
          <el-table-column
            
            :filters="[{ text: '基础模式', value: 1 }, { text: '进阶模式', value: 2 }]"
            :filter-method="filterStatus"
            filter-placement="bottom-end"
            prop="status"
            label="营运资本计算方式"
          >
            <template
              slot-scope="{ row }"
            >{{ row.status| filtersOption(operatingriskStatusOption) }}</template>
          </el-table-column>
          <el-table-column sortable prop="zzl" label="永续增长率" />
          <el-table-column sortable prop="ipr" label="IRR" />
          <el-table-column sortable prop="npv" label="NPV" />
          <el-table-column sortable prop="jthsq" label="静态回收期" />
          <el-table-column sortable prop="dthsq" label="动态回收期" />

          <el-table-column prop="name" label="测算结果详情">
            <template slot-scope="{ row ,$index}">
              <el-button type="text" size="small" @click="handleView(row)">详情</el-button>
              <el-button type="text" size="small" @click="handleCope(row)">复制</el-button>
              <el-popconfirm title="确定要删除？" @onConfirm="onConfirm(row,$index)">
                <el-button
                  type="text"
                  class="danger"
                  style="margin-left: 10px"
                  size="small"
                  slot="reference"
                >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </dd>
    </dl>
  </div>
</template>
<script>
import { formattedDate } from "@/utils/time";
import { list } from "./data";
import { operatingriskStatusOption } from "@/config/options";
export default {
  name: "",
  data() {
    return {
      operatingriskStatusOption,
      tableData: [],
      loading: false
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      list()
        .then(res => {
          console.log(res);
          this.tableData = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    formattedDate(time, str) {
      return formattedDate(time, str);
    },
    tableRowClassName(data) {
      const { row, rowIndex, columnIndex } = data;

      if (rowIndex % 2 === 1) {
        return "createoper-step-warning-row";
      }
      return "";
    },
    handleCope(row) {
      this.$router.push("/invest/createOper?id=2");
    },
    onConfirm(row, index) {
      this.tableData.splice(index, 1);
    },
    handleView(row) {
      this.$router.push("/invest/createOper?id=2&view=true");
    },
    filterStatus(value, row) {
        return row.status === value;
      },
  },
  filters: {
    filtersOption: function(val, option) {
      // 四舍五入 小数点后保留两位
      const data = option && option.find(v => v.value == val);
      return data ? data.label : val;
    }
  }
};
</script>
<style lang="scss" scoped>
.operatingrisk-list {
  dd {
    padding: 20px;
  }
}
</style>
